<template>
  <div class='app-container'>
    <div class='policynumber'>
      <div class='policynumber-tab'>
        <div class='tab-con'>
        	<span @click='toone'>按保单号登记</span>
          <span class='active'>批量登记</span>
          <span @click='toExcel'>Excel表格导入</span>
          <span @click='toPolicyhistory'>保单导入历史</span>
        </div>
      </div>
      <div class='layout1 clearfix'>
        <div class='form'>
          <el-form label-width='90px' :model="ruleForm" :rules="rules" ref="ruleForm">
            <el-form-item label="保险公司：" prop='insurance'>
              <!-- <el-select v-model="ruleForm.insurance" placeholder="请选择保险公司" class='inputbox' @change='getinsurancestaffs' size='mini'>
                  <el-option v-for="item in options" :key="item.id" :label="item.insuranceName
    " :value="item.id">
                  </el-option>
                </el-select> -->
              <el-select v-model="ruleForm.insurance" placeholder="请选择保险公司" class='inputbox' size='mini' @change='getinsurancestaffs'>
                <el-option-group v-for="group in options" :key="group.letter" :label="group.letter">
                  <el-option v-for="item in group.insurances" :key="item.id" :label="item.insuranceName
      " :value="item.id">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
            <el-form-item label="工　　号：" prop='gonghao' >
              <el-select v-model="ruleForm.gonghao" placeholder="请选择工号" size='mini' class='inputbox'>
                <el-option v-for="item in items1" :key="item.id" :label="item.staffAccount" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="组织机构：" label-width='90px' class='fontColor' >
              <!-- <tree-select :open="true" class="wd420" :treeData="treeData" :treeProps="treeProps" v-model="ruleForm.organzationId" :multiple="false" placeholder="请选择组织" @setSelectedId="getusers">
              </tree-select> -->
              <ztree-select class="wd420" :childprops="childprops" :treedata="treeData" v-model="ruleForm.organzationId"  @change='getUsers'></ztree-select>
            </el-form-item>
            <el-form-item label="业务归属：" prop='yewuyuan' >
              <el-select v-model="ruleForm.yewuyuan" class='inputbox' filterable placeholder="请选择业务归属" size='mini'>
                <el-option v-for="item in users" :key="item.organzationId" :label="item.organzationName" :value="item.organzationId">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="保单号：" prop='baodanhao'>
              <el-input type="textarea" class='baodanlist wd420' spellcheck="false" rows='10' v-model='ruleForm.baodanhao' placeholder="保单号输入栏格式为 保单号,业务员 如：232323，张三"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class='notice'>
          <div class='nstaff'>
            <span class='circle1'>注意事项</span>
          </div>
          <div class='notice1'>
            <span class='circle'></span>工号一定要选择正确，否则无法导入；</div>
          <div class='notice1'>
            <span class='circle'></span>请确保每行一个保单号；</div>
          <div class='notice1'>
            <span class='circle'></span>保单号输入栏中不能出现空行，否则空行以下保单号无法导入；</div>
            <div class='notice1'>
            <span class='circle'></span>保单号输入栏格式为 保单号,业务员 如：232323，张三</div>
        </div>
      </div>
      <div class='bottom'>
        <el-button type='button' v-on:click="submitForm('ruleForm')" :loading="loading" class='btn1 el-button el-button--primary el-button--small'>确定</el-button>
        <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
          <div class='bdload'>
            <span>保单登记失败！{{errormsg}}</span>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="centerDialogVisible = false" size="mini">确定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import treeSelect from "@/components/tree-select/tree.vue";
import ztreeSelect from "@/components/z-select/index.vue";
	import Vue from 'vue'
export default {
  components: {
    treeSelect,
    ztreeSelect
  },
  data() {
    return {
      //数组子级相关参数
      childprops: {
        name: "displayName", //显示名字
        children: "orgs", //子级字段名
        lv: "depth" //当前层级
      },
      ruleForm: {},
      users: [],
      items1: [],
      options: [],
      treeData: [],
      organzationid: "",
      organzationId: "",
      organizationunits: [],
      treeProps: {
        label: "displayName",
        children: "orgs",
        level: "depth",
        value: "id"
      },
      rules: {
        insurance: [
          { required: true, message: "请选择保险公司", trigger: "change" }
        ],
        gonghao: [{ required: true, message: "请选择工号", trigger: "change" }],
        yewuyuan: [
          { required: true, message: "请选择业务归属", trigger: "change" }
        ],
        baodanhao: [
          { required: true, message: "请选择保单号", trigger: "blur" }
        ],
        organzationId: [
          { required: true, message: "请选择组织机构", trigger: "change" }
        ]
      },
      loading:false,
      centerDialogVisible:false,
      errormsg:""
    };
  },
  created() {
    this.getinsurance();
    this.getUnits();
    this.getUserList()
  },
  methods: {
  	toone(){
  		this.$router.push({
        name: "policyNumber"
      });
  	},
    toExcel() {
      this.$router.push({
        name: "policyexcel"
      });
    },
    toPolicyhistory() {
      this.$router.push({
        name: "policyhistory"
      });
    },
    getUnits() {
     let params = {
						queryType: 1
					};
		      this.post(params, "services/app/common/GetCurrentOrganizationUnitsByType").then(
		        rs => {
		          // console.log("组织机构"+rs);
		          if (rs.success) {
		            let data = rs.result;
		            let arr = [];
		            arr.push(data);
		            this.treeData = arr;
		            // console.log(rs.result);
		            // console.log(this.treeData);
		            // console.log('-----------');
		          }
		        }
		      );
    },

    // getinsurancestaffs(val) {
    //   let params = {
    //     id: val
    //   };
    //   this.post(params, "services/app/common/GetCurrentStaffs").then(rs => {
    //     console.log(rs);
    //     let result = rs.result.items;
    //     this.items1 = result;
    //   });
    // },
    getinsurancestaffs(val) {
      this.gonghao = "";
      // let all = { id: "", staffAccount: "全部工号", describe: "" };
      let params = {
        id: val
      };
      this.post(params, "services/app/common/GetCurrentInsuranceStaffs").then(rs => {
        console.log(rs);
        let result = rs.result.items;
        // result.unshift(all);
        this.items1 = result;
        for (let i = 0; i < this.items1.length; i++) {
          //staffAccount
          if (this.items1[i].describe != "") {
            this.items1[i].staffAccount =
              this.items1[i].staffAccount +
              " (" +
              this.items1[i].describe +
              ")";
          } else {
            this.items1[i].staffAccount = this.items1[i].staffAccount;
          }
        }
        if (val == "" || val == null) {
          this.items1 = [];
          this.items1.push(all);
        }
      });
    },
    getinsurance() {
      let params = {};
      // let all = { id: "", insuranceName: "全部保险公司" };
      this.post(params, "services/app/common/GetGroupInsurances").then(rs => {
        console.log(rs);
        let result = rs.result.items;
        // result.unshift(all);
        this.options = result;
      });
    },
    getUsers(val){
        Vue.set(this.ruleForm,'yewuyuan','')
        let params = {
            organzationId: val
        };
        this.post(params, "services/app/common/CurrentBusinessAscription").then(rs => {
          
          if (rs.success) {
            let result = rs.result.items;
            // this.ruleForm.yewuyuan = ''
            this.users = result;
          }
        });
    },
    	getUserList(){
						this.post({}, "services/app/common/CurrentBusinessAscription").then(rs => {
							
			        if (rs.success) {
			          let result = rs.result.items;
								this.users = result;
								//  this.formLabel.UserId=rs.result.items[0].organzationId
						
			        }
			      });
				},
    leadin() {
    	this.loading=true
      let bdh = this.ruleForm.baodanhao;
      let dd = bdh.replace(/\r\n/g, ";").replace(/\n/g, ";");
      let arr = dd.split(";");
      let len = arr.length;
      let params = {
        staffId: this.ruleForm.gonghao,
        BusinessOrganzationId: this.ruleForm.yewuyuan,
        guaranteeContent: arr,
      };
      this.post(params, "services/app/guaranteeSlip/ImportGuarantee").then(
        rs => {
          console.log(rs);
          this.loading=false
          if (rs.success) {
            var id = rs.result.batchId;
            this.$router.push({
              name: "load",
              params: { id: id,len:len }
            });
          } else {
             this.loading=false;
             this.centerDialogVisible = true;
            this.errormsg = rs.error.message;
          }
        }
      );
    },
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate(valid => {
        if (valid) {
          // alert('submit!');
          // this.leadin();

          this.leadin();
        } else {
          return false;
        }
      });
    }
  },

};
</script>
<style lang='scss' scoped>
.policynumber {
  .policynumber-tab {
    width: 100%;
    .tab-con {
      border-bottom: 1px solid #cbcbcb;
      span {
        width: 150px;
        line-height: 60px;
        height: 60px;
        display: inline-block;
        text-align: center;
        font-size: 16px;
        cursor: pointer;
        margin-bottom: -1px;
      }
      span:first-child {
        margin-left: 20px;
      }
      .active {
        color: #ee6000;
        background: url(../../assets/images/bomactive2x.png) center 51px no-repeat;
      }
    }
  }
  .layout1 {
    margin-left: 49px;
    margin-top: 30px;
    .form {
      float: left;
      width: 520px;
      .el-form-item__label {
        padding-right: 20px;
      }
      .el-input__inner {
        padding-left: 8px;
      }
      .el-textarea__inner {
        padding-left: 8px;
        width: 420px;
        height: 280px;
      }
      .inputbox {
        width: 420px;
        height: 28px;
      }
    }
    .notice {
      float: left;
      color: #555;
      margin-left: 90px;
      .notice1 {
        margin-top: 20px;
        font-size: 13px;
      }
    }
    .circle1 {
    
      font-size: 14px;
    }
    .circle {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background-color: #cf1322;
      margin-right: 10px;
    }
  }
  .bottom {
    text-align: center;
    .btn1 {
      display: inline-block;
      margin-bottom: 37px;
    }
    .bdload {
      text-align: center;
    }
  }
}
.wd420 {
  width: 420px;
}
</style>
